import React, { useState } from "react";
import "./index.scss";
import { Tree,Tabs } from "antd";
import DrillDow from "./components/DrillDow";
import {useHistory} from 'react-router-dom'

const treeData = [
  {
    title: "大学",
    key: "0",
    children: [
      {
        title: "大一",
        key: "0-0",
        children: [
          {
            title: "计算机网络",
            key: "0-0-0",
          },
          {
            title: "数据结构",
            key: "0-0-1",
          },
        ],
      },
      {
        title: "大二",
        key: "0-1",
        children: [
          {
            title: "计算机组成原理",
            key: "0-1-0",
          },
          {
            title: "操作系统",
            key: "0-1-1",
          },
        ],
      },
    ],
  },
  {
    title: "高中",
    key: "1",
    children: [
      {
        title: "高一",
        key: "1-0",
      },
      {
        title: "高二",
        key: "1-1",
      },
    ],
  },
];
const itemList =[
    {
        key:'tab1',
        lable:'组织领导',
    },
    {
        key:'tab2',
        label:'人员管理'
    }
]
export default function AntdPage() {

    const history = useHistory()
  //  下钻页是否显示
  const [drillVisible, setDrillVisible] = useState(false);

  //  下钻页显示隐藏
  const handlDrillVisible = (value) => {
    setDrillVisible(value);
  };
  return (
    <div className="antd-page">
      <div>
        <div className="tree">
          <Tree className="tree1" treeData={treeData}></Tree>
        </div>
        <div className="drawer" onClick={() => setDrillVisible(!drillVisible)}>
          Drawer
        </div>
        {drillVisible && (
          <DrillDow
            drillVisible={drillVisible}
            handlDrillVisible={handlDrillVisible}
          />
        )}
      </div>
      <div style={{marginLeft:'200px'}}>
         {/* <div style={{cursor:'pointer'}} onClick={() => history.push('variousExercises/pages/antdPage?kk=1')}>
             哈哈
         </div> */}
         <Tabs defaultActiveKey="tab1" 
                items={itemList.map( e => ({
                    key:e.key,
                    label:e.label,
                    children:<div>123</div>
                }))}
                >

         </Tabs>
      </div>
    </div>
  );
}
